<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影院</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
</head>
<body>

<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class=" item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="active  my-color item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
<div class="cinema_detail_bg">
    <div class="ui container">
        <h3 class="detail_title"><span th:text="${cinema.name}"></span>
            <span class="score" th:text="${cinema.grade}"></span>
        </h3>
        <input type="hidden" th:value="${cinema.id}" id="cinema_id">
        <input type="hidden" th:value="${cinema.XPos}" id="x_pos">
        <input type="hidden" th:value="${cinema.YPos}" id="y_pos">
        <div class="ui grid">
            <div class="row">
                <div class="four wide column">
                    <img width="300" height="230" th:src="@{${cinema.image}}" >
                </div>
                <div class="eight wide column">
                    <div class="item_font">
                        纤细地址：<span th:text="${cinema.address}"></span>
                    </div>
                    <div class="item_font">
                        联系电话：<span th:text="${cinema.telephone}"></span>
                    </div>
                    <div class="item_font">
                        更多信息：交通信息
                    </div>
                </div>
                <div class="four wide column">
                    <div id="map">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui container">
    <div class="ui  secondary pointing  segment menu second_menu">
        <div class='active item' id='now_btn'>选座购票</div>
        <div class='item' id='next_btn'>影院信息</div>
    </div>
</div>
<div class="ui container">
    <div class="row add_margin_top" id="now">
        <div class="ui grid">
            <div class="row remove_padding">
                <div class="three wide column bg_color_red_medium ">
                    <div class="text_center_gray">
                        选择影片
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="selected">
                    <span th:each="film,stat:${films}">
                          <input th:if="${stat.first}" type='hidden' th:value='${film.id}' id='film_input'>
                            <a class='area_a ' th:classappend="${stat.first}?'select'" th:onclick='select_film([[${film.id}]],this)' th:text="${film.name}"></a>
                    </span>

                </div>
            </div>
            <div class="row remove_padding" th:if="${times}!=null">
                <div class="three wide column bg_color_red_medium ">
                    <div class="text_center_gray">
                        选座时间
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="times">
                   <span th:each="time,stat:${times}">
                       <input type='hidden' th:if="${stat.first}" th:value='${time}' id='time_input'>
                       <a class='area_a' th:classappend="${stat.first}?'select'" th:onclick='changeTable([[${time}]],this)' th:text="${#dates.format(time,'MM月dd日')}"></a>
                   </span>
                </div>
            </div>
        </div>
        <div class="row" id="film_info" th:if="${films.size()}!=0">
            <div class="ui grid add_margin_top">
                <div class="three wide column">
                    <img width="140" height="180" th:src='@{${films.get(0).picture}}'>
                </div>
                <div class="thirteen wide column">
                    <h4 class="title_info">
                        <a th:href="@{/detail/{id}(id=${films.get(0).id})}" th:text="${films.get(0).name}"></a>
                    </h4>

                    <div class="row detail">
                        导演：<span th:text="${films.get(0).director}"></span>
                    </div>
                    <div class="row detail">
                        主演：<span th:text="${films.get(0).actor}"></span>
                    </div>
                    <div class="row detail">
                        类型：<span th:text="${films.get(0).type}"></span>
                    </div>
                    <div class="row detail">
                        制片国家/地区：<span th:text="${films.get(0).area}"></span>
                    </div>
                    <div class="row detail">
                        语言：<span th:text="${films.get(0).language}"></span>
                    </div>
                </div>
            </div>
        </div>
        <div th:if="${times}!=null">
            <table class="ui striped table" id="table">
                <thead>
                <th>放映时间</th>
                <th>语言版本</th>
                <th>放映厅</th>
                <th>座位情况</th>
                <th>现价（元）</th>
                <th>选座购票</th>
                </thead>
                <tbody id='table2'>

                <tr th:each="table:${tables}">
                    <td th:text="${#dates.format(table.time,'HH:mm')}"></td>
                    <td>原语3D</td>
                    <td th:text="${table.name}">".$value['name']."</td>
                    <td>宽松</td>
                    <td th:text="${table.price}">.$value['price']."</td>
                    <td><a th:href='@{/user/seatOrder/{id}(id=${table.id})}' class='seat_btn'>选座购票</a></td>
                </tr>


                </tbody>
            </table>

        </div>

    </div>
    <div class="row hide" id="next">
        <h3>影院介绍</h3>
        <div class="ui fitted divider"></div>
        <div class="row add_top_bottom_padding"> 纤细地址：<span th:text="${cinema.address}"></span>
        <div class="row add_top_bottom_padding"> 联系电话：<span th:text="${cinema.telephone}"></span></div>
        <h3>交通信息</h3>
        <div class="ui fitted divider"></div>
        <div class="row add_top_bottom_padding">地图：</div>
        <div class="row">
            <div id="big_map"></div>
            <div id="panel"></div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2fe2dc8030815b6bf8f21c4c59f93e03"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    let now_film=$('#film_input').val();
    let cinema_id=$('#cinema_id').val();
    let x_pos=$('#x_pos').val();
    let y_pos=$('#y_pos').val();
    let map = new AMap.Map('map', {
        zoom:11,//级别
        center: [x_pos,y_pos],//中心点坐标
        viewMode:'3D'//使用3D视图
    });
    let marker = new AMap.Marker({
        position: new AMap.LngLat(x_pos, y_pos),
        title: '电影城'
    });
    map.add(marker)

    let bigMap=new AMap.Map('big_map',{
        zoom:13,//级别
        center: [x_pos,y_pos],//中心点坐标
        viewMode:'3D'//使用3D视图
    })
    bigMap.add(marker)

    AMap.plugin('AMap.Geolocation', function() {
        let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        bigMap.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    let lng="";
    let lat="";
    //解析定位结果
    function onComplete(data) {
        let str = [];
        str.push(data.position);
        lng=data.position.lng;
        lat=data.position.lat;
        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
    }
    //解析定位错误信息
    function onError(data) {
        console.log(data);
    }
    setTimeout(function () {
        AMap.plugin('AMap.Driving', function() {
            //构造路线导航类
            let driving = new AMap.Driving({
                map: bigMap,
                panel: "panel"
            });
            // 根据起终点经纬度规划驾车导航路线
            console.log(lng,lat,x_pos,y_pos);
            driving.search(new AMap.LngLat(lng, lat), new AMap.LngLat(x_pos, y_pos), function(status, result) {
                if (status === 'complete') {
                    console.log('绘制驾车路线完成');
                } else {
                    console.log(result);
                }
            });
        });
    },2000)



    $('#now_btn').click(function () {
        $('#now_btn').addClass('active')
        $('#next_btn').removeClass('active')
        $('#now').removeClass('hide')
        $('#next').addClass('hide')
    })
    $('#next_btn').click(function () {
        $('#next_btn').addClass('active')
        $('#now_btn').removeClass('active')
        $('#next').removeClass('hide')
        $('#now').addClass('hide')
    })

    function select_film(id,e) {
        now_film=id;
        $('#selected').find("a").each(function () {
            let me = $(this);
            let bool = me.attr("class").indexOf("select");
            if (bool!=-1) {
                me.removeClass("select");
            }
        })
        $(e).addClass('select');
        $.ajax({
            url:'http://localhost:8080/selectFilmById',
            method:'get',
            data:{id:id},
            dataType:'json',
            success:function (res) {
                $('#film_info').empty()
                let item = res.data;
                    let element="<div class='ui grid add_margin_top'><div class='three wide column'><img src='"+item['picture']+"'></div>" +
                        "<div class='thirteen wide column'><h4 class='title_info'><a href='/detail/"+item['id']+"'>" +item['name']+"</a></h4>" +
                        "<div class='row detail'>导演："+item['director']+"</div>"+
                        "<div class='row detail'>主演："+item['actor']+"</div>"+
                        "<div class='row detail'>类型："+item['type']+"</div>"+
                        "<div class='row detail'>制片国家/地区："+item['area']+"</div>"+
                        "<div class='row detail'>语言："+item['language']+"</div>"
                        +"</div></div>";
                    $('#film_info').append(element);
            }
        })


        setTimeout(function () {
            $.ajax({
                url:'http://localhost:8080/getTimes',
                method: 'get',
                data:{id:id,cinema_id:cinema_id},
                dataType: 'json',
                success:function (res) {
                    $('#times').empty();
                    let data=res.data;
                    let boolean=true;
                    data.forEach(function (item) {
                        let element="";
                        if (boolean){
                            element="  <input  type='hidden' value='"+item+"' id='time_input'>" +
                                "<a class='area_a select' onclick='changeTable(\""+item+"\",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                            boolean=false;
                        }else {
                            element= "<a class='area_a' onclick='changeTable(\""+item+"\",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                        }

                        $('#times').append(element)
                    })
                }
            })
        },500)
        setTimeout(function () {
            let time_=$('#time_input').val();
            if (time_==null){
                $('#table2').empty();
            }else{
                $.ajax({
                    url:'http://localhost:8080/getTable',
                    method: 'get',
                    data:{id:id,time:time_,cinema_id:cinema_id},
                    dataType: 'json',
                    success:function (res) {
                        $('#table2').empty();
                        let data=res.data;
                        data.forEach(function (item) {
                            let element="<tr><td>"+item['time'].substring(0,5)+"</td><td>原语3D</td>" +
                                "<td>"+item['name']+"</td><td>宽松</td><td>"+item['price']+"</td>" +
                                "<td><a href='/user/seatOrder/"+item['id']+"' class='seat_btn'>选座购票</a></td></tr>";
                            $('#table2').append(element)
                        })
                    }
                })
            }

        },1000)
    }

    function changeTable(time1,e) {
        $('#times').find("a").each(function () {
            let me = $(this);
            let bool = me.attr("class").indexOf("select");
            if (bool!=-1) {
                me.removeClass("select");
            }
        })
        $(e).addClass('select');
        $.ajax({
            url:'http://localhost:8080/getTable',
            method: 'get',
            data:{id:now_film,time:time1,cinema_id:cinema_id},
            dataType: 'json',
            success:function (res) {
                $('#table2').empty();
                let data=res.data;
                data.forEach(function (item) {
                    let element="<tr><td>"+item['time'].substring(0,5)+"</td><td>原语3D</td>" +
                        "<td>"+item['name']+"</td><td>宽松</td><td>"+item['price']+"</td>" +
                        "<td><a href='/user/seatOrder/"+item['id']+"' class='seat_btn'>选座购票</a></td></tr>";
                    $('#table2').append(element)
                })
            }
        })
    }

</script>
</body>
</html>